<#import "/spring.ftl" as s>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>BOSS-CRM管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <#include '../include/baselink.ftl'>
    <link rel="stylesheet" type="text/css" href="<@s.url '/assets/css/jquery.pagination.css'/>">
</head>
<body>
<div id="main">
    <#include '../include/header.ftl'>
    <#include '../include/sidebar.ftl'>
    <section id="content_wrapper">
        <section id="content" class="table-layout animated fadeIn">
            <div class="tray tray-center">
                <div class="panel" id="spy7">
                    <div class="panel-heading">
                        <span class="panel-icon"><i class="fa fa-table"></i></span>
                        <span class="panel-title">产品列表</span>
                    </div>

                    <div class="panel-body">
                        <div class="panel">
                            <div class="well well-sm mn">
                                <form class="form-inline">
                                    <div class="form-group">
                                        <div class="input-group input-group-sm">
                                            <div class="input-group-addon btn btn-default">产品号</div>
                                            <input type="text" class="form-control input-sm"
                                                   placeholder="请输入产品号"
                                                   v-model="searchInfo.lxId">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="input-group input-group-sm">
                                            <div class="input-group-addon btn btn-default">产品名称</div>
                                            <input type="text" class="form-control input-sm"
                                                   placeholder="请输入产品名称"
                                                   v-model="searchInfo.name">
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="panel-body">
                            <table class="table table-striped table-responsive table-bordered table-condensed">
                                <thead>
                                <tr>
                                    <th>产品号</th>
                                    <th>产品名称</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="product in products">
                                    <td>{{product.lxId}}</td>
                                    <td>{{product.name}}</td>
                                </tr>
                                <tr>
                                    <td class="text-center" colspan="20" v-if="products.length == 0">
                                        没有数据 ！
                                    </td>
                                </tr>
                                </tbody>
                                <tfoot>
                                <tr>
                                    <td colspan="20">
                                        <div class="table-responsive">
                                            <div id="pageMenu"></div>
                                        </div>
                                    </td>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>
</div>
<#include '../include/footer_js.ftl'/>
<script src="<@s.url '/assets/js/jquery.pagination.min.js'/>"></script>
<script>
    var app = new Vue({
        el: '#main',
        data: {
            products: [],
            searchInfo: {
                lxId: '',
                name: '',
                page: 1,
                pageSize: 5
            }
        },
        created: function () {
            this.findProductList();
        },
        watch: {
            "searchInfo.page": function () {
                this.query();
            },
            'searchInfo.lxId': function () {
                this.findProductList();
            },
            'searchInfo.name': function () {
                this.findProductList();
            }
        },
        methods: {
            findProductList: function () {
                this.searchInfo.page = 1;
                $('#pageMenu').page('destroy');
                this.query();
            },
            query: function () {
                var url = contentPath + "/api/product/list.ftl";
                this.$http.post(url, this.searchInfo).then(function (response) {
                    this.products = response.body.data.list;
                    console.log(this.products);
                    var temp = this;
                    $("#pageMenu").page({
                        total: response.body.data.total,
                        pageSize: response.body.data.pageSize,
                        firstBtnText: '首页',
                        lastBtnText: '尾页',
                        prevBtnText: '上一页',
                        nextBtnText: '下一页',
                        showInfo: true,
                        showJump: true,
                        jumpBtnText: '跳转',
                        infoFormat: '{start} ~ {end}条，共{total}条'
                    }, response.body.data.page).on("pageClicked", function (event, pageIndex) {
                        temp.searchInfo.page = pageIndex + 1;
                    }).on('jumpClicked', function (event, pageIndex) {
                        temp.searchInfo.page = pageIndex + 1;
                    });
                }, function (error) {
                    swal(error.body.msg);
                });
            }
        }
    });
</script>
</body>
</html>